<template>
    <el-dialog v-model="show" title="付款详情" width="35%" align-center @close="handleClose">
        <el-row>
            <el-col :span="8">
                对账日期： {{ props.paymentDetailsRow.reconciliationDate }}
            </el-col>
            <el-col :span="8">
                付款方名称： {{ props.paymentDetailsRow.payer }}
            </el-col>
            <el-col :span="8">
                摘要： {{ props.summaryType.filter((item: any) => item.value == props.paymentDetailsRow.summary)[0].label }}

            </el-col>
            <el-col :span="8">
                对账金额： {{ props.paymentDetailsRow.reconciliationAmount }}
            </el-col>
            <el-col :span="8">
                已付款金额： {{ props.paymentDetailsRow.paidAlready }}
            </el-col>
            <el-col :span="8">
                待付款金额：{{ Number(props.paymentDetailsRow.reconciliationAmount) -
                    Number(props.paymentDetailsRow.paidAlready) }}
            </el-col>
            <el-col :span="8">
                付款状态： <span style="color: #F75F51" v-if="props.paymentDetailsRow.payStatus == 0">未付款</span>
                <span style="color: #E8A94D" v-else-if="props.paymentDetailsRow.payStatus == 1">部分付款</span>
                <span style="color: #68C23D" v-else-if="props.paymentDetailsRow.payStatus == 0">已付款</span>
            </el-col>
            <el-col :span="8">
                货损抵扣金额： {{ props.paymentDetailsRow.damageAmount }}
            </el-col>
            <!-- <el-col :span="8">
                平账金额：
            </el-col> -->
        </el-row>

        <el-table class="mt20" :data="props.initList" style="width: 100%">
            <el-table-column prop="paymentDate" label="付款日期" />
            <el-table-column prop="accountName" label="付款账号" />
            <el-table-column prop="paymentAmount" label="付款金额" />
            <el-table-column prop="createByName" label="操作人" />
            <el-table-column prop="paymentInfo" label="付款信息" />
        </el-table>

    </el-dialog>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const props = defineProps(['visible', 'initList', 'paymentDetailsRow', 'summaryType']);
const emits = defineEmits(['submit', 'close']);

const show = ref(false);

watch(() => props.visible, async (newValue) => {
    show.value = newValue
    if (newValue) {
    }
}, { deep: true });

const tableData = [
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
]
const handleClose = () => {
    emits('close');
};

onMounted(() => {
})
</script>

<style lang="scss" scoped>
.el-col {
    margin-bottom: 10px;
    color: #000;
}
</style>